<template>
  <div class="page building">
    <div id="map" class="map"></div>
    <div class="page-container">
      <Card>
        <div class="menu-block">
          <div class="menu-item" v-for="item in menuList" :key="item.id" :class="menuTab==item.id?'active':''" @click="menuTab=item.id">{{item.name}}</div>
        </div>
        <div class="page-block"  v-if="menuTab===1">
          <div class="top-block">
            <div class="top-item" >
              <img :src="list[0].pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{list[0].name}}</div>
                <div class="unit">{{list[0].unit}}</div>
                <div class="text">{{list[0].content}}</div>
              </div>
            </div>
            <div class="top-item">
              <img :src="list[1].pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{list[1].name}}</div>
                <div class="unit">{{list[1].unit}}</div>
                <div class="text">{{list[1].content}}</div>
              </div>
            </div>
          </div>
          <div class="middle-block">
            <div class="top-item" >
              <img :src="list[2].pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{list[2].name}}</div>
                <div class="unit">{{list[2].unit}}</div>
                <div class="text">{{list[2].content}}</div>
              </div>
            </div>
            <div class="top-item">
              <img :src="list[3].pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{list[3].name}}</div>
                <div class="unit">{{list[3].unit}}</div>
                <div class="text">{{list[3].content}}</div>
              </div>
            </div>
          </div>
          <div class="info-block">
            <div class="info-item" v-for="item in list.slice(4)" :key="item.id">
              <img :src="item.pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{item.name}}</div>
                <div class="unit">{{item.unit}}</div>
                <div class="text">{{item.content}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-block"  v-if="menuTab===2">
          <div class="top-block">
            <div class="top-item" >
              <img :src="list1[0].pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{list1[0].name}}</div>
                <div class="unit">{{list1[0].unit}}</div>
                <div class="text">{{list1[0].content}}</div>
              </div>
            </div>
            <div class="top-item">
              <img :src="list1[1].pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{list1[1].name}}</div>
                <div class="unit">{{list1[1].unit}}</div>
                <div class="text">{{list1[1].content}}</div>
              </div>
            </div>
          </div>
          <div class="info-block">
            <div class="info-item" v-for="item in list1.slice(2)" :key="item.id">
              <img :src="item.pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{item.name}}</div>
                <div class="unit">{{item.unit}}</div>
                <div class="text">{{item.content}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-block"  v-if="menuTab===3">
          <div class="info-block">
            <div class="info-item" v-for="item in list2" :key="item.id">
              <img :src="item.pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{item.name}}</div>
                <div class="unit">{{item.unit}}</div>
                <div class="text">{{item.content}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-block"  v-if="menuTab===4">
          <div class="info-block">
            <div class="info-item" v-for="item in list3" :key="item.id">
              <img :src="item.pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{item.name}}</div>
                <div class="unit">{{item.unit}}</div>
                <div class="text">{{item.content}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-block"  v-if="menuTab===5">
          <div class="info-block">
            <div class="info-item" v-for="item in list4" :key="item.id">
              <img :src="item.pic" alt="" class="img">
              <div class="right-info">
                <div class="name">{{item.name}}</div>
                <div class="unit">{{item.unit}}</div>
                <div class="text">{{item.content}}</div>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import Card from '@/components/Card.vue'

export default {
  components: { Card},
  data(){
    return {
      menuTab:1,
      menuList:[{id:1,name:'网格警长'},{id:2,name:'网格长'},{id:3,name:'驻社区司法干警'},{id:4,name:'义警队伍'},{id:5,name:'社区兼职调解员'},],
      list:[
        {id:1,pic:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/zong_zhaoheng.jpg',name:'赵恒',unit:'总网格警长',content:'总网格警长负责统筹网格治安防控、协调多部门联动、分析研判治安数据、指挥应急处置及开展警员培训，全面保障辖区安全稳定。'},
        {id:2,pic:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/chengGuoshuai.jpg',name:'程国帅',unit:'一级网格警长',content:'负责采集行业场所和人口信息，依托"警网融合"排查化解矛盾，帮教重点人员并开展普法宣传，联合社区综治中心和网格长进行安全检查和治安联巡，及时处置警情维护辖区稳定。'},
        // {id:3,pic:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/chengGuoshuai.jpg',name:'程国帅',unit:'二级网格警长',content:'负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。'},
        {
          id: 3,
          pic: "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/mayanmei.jpg",
          name: "马艳梅",
          unit: "二级网格警长",
          content: "负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。"
        },
        {
          id: 4,
          pic: "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/fengyingfeng.jpg",
          name: "冯应峰",
          unit: "二级网格警长",
          content: "负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。"
        },
        {
          "id": 5,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/fengxue.jpg",
          "name": "冯雪",
          "unit": "二级网格警长",
          "content": "负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。"
        },
        {
          "id": 6,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/shengrong.jpg",
          "name": "盛蓉",
          "unit": "二级网格警长",
          "content": "负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。"
        },
        {
          "id": 7,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/lihaotian.jpg",
          "name": "李浩田",
          "unit": "二级网格警长",
          "content": "负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。"
        },

        {
          "id": 8,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/wanglu.jpg",
          "name": "王璐",
          "unit": "二级网格警长",
          "content": "负责组织落实网格警务工作，监督指导三级网格警长，协调疑难问题，收集反馈治安信息，维护辖区稳定，开展普法宣传，快速响应突发事件，确保辖区安全。"
        }
      ],
      list1:[
        {
          "id": 1,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/金泉路社区总网格长（郭婷婷）.jpg",
          "name": "郭婷婷",
          "unit": "总网格长",
          "content": "统筹社区网格化管理工作，制定规划并监督落实；协调跨网格资源，解决重大疑难问题；组织会议、培训及突发事件处置，向上级汇报工作成效，确保网格高效运行。"
        },
        {
          "id": 2,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/常务网格长（魏丽虹）.jpg",
          "name": "魏丽虹",
          "unit": "常务网格长",
          "content": "协助总网格长推进日常事务，分解任务并督导落实；定期巡查网格，协调矛盾，更新数据；组织网格员例会，推动政策落地，保障网格工作有序开展。"
        },
        {
          "id": 3,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/仲毓萍.jpg",
          "name": "仲毓萍",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 4,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/党兴军.jpg",
          "name": "党兴军",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 5,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/冯会霞.jpg",
          "name": "冯会霞",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 6,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/刘光明.jpg",
          "name": "刘光明",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 7,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/华丽.jpg",
          "name": "华丽",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 8,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/卢凤兰.jpg",
          "name": "卢凤兰",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 9,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/周英.jpg",
          "name": "周英",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 10,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/孟晓丽.jpg",
          "name": "孟晓丽",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 11,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/房丽.jpg",
          "name": "房丽",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 12,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/景胜利.jpg",
          "name": "景胜利",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 13,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/朱丽媛.jpg",
          "name": "朱丽媛",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 14,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/杨树虎.jpg",
          "name": "杨树虎",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 15,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/梁小玲.jpg",
          "name": "梁小玲",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 16,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/殷小明.jpg",
          "name": "殷小明",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 17,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/殷建华.jpg",
          "name": "殷建华",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 18,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/江凤.jpg",
          "name": "江凤",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 19,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/秦媛.jpg",
          "name": "秦媛",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 20,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/胡燕.jpg",
          "name": "胡燕",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 21,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/赵娜.jpg",
          "name": "赵娜",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 22,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/赵颜玲.jpg",
          "name": "赵颜玲",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 23,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/连伟娟.jpg",
          "name": "连伟娟",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 24,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/马丽华.jpg",
          "name": "马丽华",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 25,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/马冬花.jpg",
          "name": "马冬花",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 26,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/高洋.jpg",
          "name": "高洋",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        },
        {
          "id": 27,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/community/高萍华.jpg",
          "name": "高萍华",
          "unit": "网格长",
          "content": "负责网格日常巡查，采集信息、排查隐患；受理居民诉求，调解纠纷；配合专项工作，走访特殊群体，及时上报问题，确保“小事不出网格”。"
        }
      ],
      list2:[
        {
          "id": 1,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/司法局干警（陈国皇）.jpg",
          "name": "陈国皇",
          "unit": "司法局干警",
          "content": "司法局驻社区干警的工作目标是“法治宣传、法律服务”，通过贴近群众的方式实现“普法教育到基层、法律咨询在身边”。"
        },
        {
          "id": 2,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/检察院（李翔）.jpg",
          "name": "李翔",
          "unit": "检察院干警",
          "content": "检察院驻社区干警的工作目标是“检力下沉、服务民生”，通过贴近群众的方式实现“监督触角到基层、矛盾化解在源头”。"
        },
        {
          "id": 3,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/检察院（茹英）.jpg",
          "name": "茹英",
          "unit": "检察院干警",
          "content": "检察院驻社区干警的工作目标是“检力下沉、服务民生”，通过贴近群众的方式实现“监督触角到基层、矛盾化解在源头”。"
        },
        {
          "id": 4,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/法院干警（孙莹）.jpg",
          "name": "孙莹",
          "unit": "法院干警",
          "content": "法院驻社区干警的工作目标是“司法便民、调解优先”，通过贴近群众的方式实现“诉讼服务到基层、纠纷调处在诉前”。"
        },
        {
          "id": 5,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/法院干警（张文静）.jpg",
          "name": "张文静",
          "unit": "法院干警",
          "content": "法院驻社区干警的工作目标是“司法便民、调解优先”，通过贴近群众的方式实现“诉讼服务到基层、纠纷调处在诉前”。"
        },
        {
          "id": 6,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/法院干警（徐芳）.jpg",
          "name": "徐芳",
          "unit": "法院干警",
          "content": "法院驻社区干警的工作目标是“司法便民、调解优先”，通过贴近群众的方式实现“诉讼服务到基层、纠纷调处在诉前”。"
        },
        {
          "id": 7,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/法院干警（赵蓉）.jpg",
          "name": "赵蓉",
          "unit": "法院干警",
          "content": "法院驻社区干警的工作目标是“司法便民、调解优先”，通过贴近群众的方式实现“诉讼服务到基层、纠纷调处在诉前”。"
        },
        {
          "id": 8,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/jianchayuan/驻社区公职律师（王晋双）.jpg",
          "name": "王晋双",
          "unit": "驻社区公职律师",
          "content": "公职律师驻社区的工作目标是“公益服务、法律援助”，通过专业法律支持实现“法律咨询零距离、维权服务在身边”。"
        }
      ],
      list4:[
        {
          "id": 1,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/律师（张丹）.jpg",
          "name": "张丹",
          "unit": "律师",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 2,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/朱海鑫.jpg",
          "name": "朱海鑫",
          "unit": "民警",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 3,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/检察官（马兴国）.jpg",
          "name": "马兴国",
          "unit": "检察官",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 4,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/民警（张丽）.jpg",
          "name": "张丽",
          "unit": "民警",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 5,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/民警（张铭伟）.jpg",
          "name": "张铭伟",
          "unit": "民警",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 6,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/民警（徐永飞）.jpg",
          "name": "徐永飞",
          "unit": "民警",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 7,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/民警（翟智元）.jpg",
          "name": "翟智元",
          "unit": "民警",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        },
        {
          "id": 8,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/tiaojieyuan/民警（运海英）.jpg",
          "name": "运海英",
          "unit": "民警",
          "content": "负责调解民间纠纷、排查矛盾隐患、报告重大纠纷、协助跨区调解、督促协议履行、开展普法宣传，严守工作纪律，维护社区和谐稳定。"
        }
      ],
      list3:[
        {
          "id": 1,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/安康物业范丽萍.jpg",
          "name": "范丽萍",
          "unit": "安康物业",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 2,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/安康苗苗陈莉.jpg",
          "name": "陈莉",
          "unit": "安康苗苗",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 3,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/富丽阳光小区物业经理 岳耀峰.jpg",
          "name": "岳耀峰",
          "unit": "富丽阳光小区物业经理",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 4,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/富丽阳光小区门卫  张永祥.jpg",
          "name": "张永祥",
          "unit": "富丽阳光小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 5,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/怡和、悦和  门卫李华.jpg",
          "name": "李华",
          "unit": "怡和、悦和门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 6,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/怡和、悦和 门卫冯小明.jpg",
          "name": "冯小明",
          "unit": "怡和、悦和门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 7,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/怡和悦和物业张福刚.jpg",
          "name": "张福刚",
          "unit": "怡和悦和物业",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 8,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/怡景花园于永合.jpg",
          "name": "于永合",
          "unit": "怡景花园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 9,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/怡景花园段慧玲.jpg",
          "name": "段慧玲",
          "unit": "怡景花园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 10,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/怡景花园赵军福.jpg",
          "name": "赵军福",
          "unit": "怡景花园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 11,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/智慧岛幼儿园安保人员郑鹏.jpg",
          "name": "郑鹏",
          "unit": "智慧岛幼儿园安保人员",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 12,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/泉馨苑茹明忠.jpg",
          "name": "茹明忠",
          "unit": "泉馨苑",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 13,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/浩泽园小区门卫张建福.jpg",
          "name": "张建福",
          "unit": "浩泽园小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 14,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/浩泽园小区门卫王树年.jpg",
          "name": "王树年",
          "unit": "浩泽园小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 15,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/瀚海明珠小区物业经理 周兴成.jpg",
          "name": "周兴成",
          "unit": "瀚海明珠小区物业经理",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 16,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/瀚海明珠小区门卫  王金泉.jpg",
          "name": "王金泉",
          "unit": "瀚海明珠小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 17,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/瀚海明珠小区门卫  黄宗忠.jpg",
          "name": "黄宗忠",
          "unit": "瀚海明珠小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 18,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/瀚海明珠小区门卫 刘兴国.jpg",
          "name": "刘兴国",
          "unit": "瀚海明珠小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 19,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/瀚海明珠小区门卫 王石英.jpg",
          "name": "王石英",
          "unit": "瀚海明珠小区门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 20,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/爱萌幼儿园保安 徐春霞 (1).jpg",
          "name": "徐春霞",
          "unit": "爱萌幼儿园保安",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 21,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/爱萌幼儿园保安吕丽霞 (5).jpg",
          "name": "吕丽霞",
          "unit": "爱萌幼儿园保安",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 22,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/碧玉佳苑物业经理 孙金勤.jpg",
          "name": "孙金勤",
          "unit": "碧玉佳苑物业经理",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 23,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/碧玉佳苑门卫 肖金文.jpg",
          "name": "肖金文",
          "unit": "碧玉佳苑门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 24,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/祥瑞雅苑、润泽瑞景 汪全合 妥尚元.jpg",
          "name": "汪全合 妥尚元",
          "unit": "祥瑞雅苑、润泽瑞景",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 25,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/祥瑞雅苑、润泽瑞景 汪全合.jpg",
          "name": "汪全合",
          "unit": "祥瑞雅苑、润泽瑞景",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 26,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/红果果幼儿园保安 张丽萍.jpg",
          "name": "张丽萍",
          "unit": "红果果幼儿园保安",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 27,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/红果果幼儿园保安 胡佳甜.jpg",
          "name": "胡佳甜",
          "unit": "红果果幼儿园保安",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 28,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/营门路幼儿园周元仁.jpg",
          "name": "周元仁",
          "unit": "营门路幼儿园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 29,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/营门路幼儿园田建军.jpg",
          "name": "田建军",
          "unit": "营门路幼儿园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 30,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/营门路幼儿园郑彩萍.jpg",
          "name": "郑彩萍",
          "unit": "营门路幼儿园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 31,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/静湖花园王志刚.jpg",
          "name": "王志刚",
          "unit": "静湖花园",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 32,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/顺和家园物业经理 陈晓琴.jpg",
          "name": "陈晓琴",
          "unit": "顺和家园物业经理",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 33,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/顺和家园门卫 张学福.jpg",
          "name": "张学福",
          "unit": "顺和家园门卫",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 34,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/飞天苑周侠仁.jpg",
          "name": "周侠仁",
          "unit": "飞天苑",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        },
        {
          "id": 35,
          "pic": "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/teamBuilding/yijing/飞天苑高维奇.jpg",
          "name": "高维奇",
          "unit": "飞天苑",
          "content": "在公安机关指导下开展社区治安巡逻、安全宣传、矛盾调解、人口登记、隐患排查、法律宣传、信息收集及公益活动，协助维护基层治安稳定。"
        }
      ],
    }
  }
}
</script>
<style lang="scss" scoped>
.page.building{
  .map{
    width: 100%;
    height: calc(100% - 60px);
    z-index: 0;
    position: absolute;
    left: 0;
    top: 60px;
  }
  .page-container{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    .menu-block{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      .menu-item{
        background: #07233d;
        color: #22dfe9;
        padding: 6px 10px;
        font-size: 15px;
        margin-right: 20px;
        border-radius: 10px;
        cursor: pointer;
      }
      .menu-item.active{
        color: #fed52f;
        border: 1px solid #fed52f;
      }
    }
    .page-block{
      height: calc(100% - 30px);
      overflow-y: scroll;
      .top-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        .top-item{
          width: calc((100% - 30px)/4);
          margin-right: 10px;
          margin-bottom: 15px;
          background: #07233d;
          padding: 15px;
          border-radius: 10px;
          display: flex;
          background: url("~@/assets/images/building_bg.png") no-repeat center;
          background-size: 100% 100%;
          .img{
            width: 80px;
            height: 110px;
            margin-right: 10px;
            border-radius: 5px;
          }
          .right-info{
            width: calc(100% - 90px);
            .name{
              font-family: 冷酷体;
              font-size: 16px;
              margin-top: 6px;
              display: inline;
              margin-right: 20px;    // 添加右边距20px
            }
            .unit{
              font-size: 13px;
              //margin-top: 6px;
              display: inline;
              vertical-align: middle; // 垂直居中对齐
            }
            .text{
              font-size: 13px;
              margin-top: 10px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              /* 超出几行省略 */
              overflow: hidden;
            }
          }
        }
      }
      .middle-block{
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        .top-item{
          width: calc((100% - 30px)/4);
          margin-right: 10px;
          margin-bottom: 15px;
          background: #07233d;
          padding: 15px;
          border-radius: 10px;
          display: flex;
          background: url("~@/assets/images/building_bg.png") no-repeat center;
          background-size: 100% 100%;
          .img{
            width: 80px;
            height: 110px;
            margin-right: 10px;
            border-radius: 5px;
          }
          .right-info{
            width: calc(100% - 90px);
            .name{
              font-family: 冷酷体;
              font-size: 16px;
              margin-top: 6px;
              display: inline;
              margin-right: 20px;    // 添加右边距20px
            }
            .unit{
              font-size: 13px;
              //margin-top: 5px;
              display: inline;
              vertical-align: middle; // 垂直居中对齐
            }
            .text{
              font-size: 13px;
              margin-top: 10px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              /* 超出几行省略 */
              overflow: hidden;
            }
          }
        }
      }
      .info-block{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        color: #fff;
        .info-item:nth-child(4n){
          margin-right: 0;
        }
        .info-item{
          width: calc((100% - 30px)/4);
          margin-right: 10px;
          margin-bottom: 15px;
          background: url("~@/assets/images/building_bg.png") no-repeat center;
          background-size: 100% 100%;
          padding: 15px;
          border-radius: 10px;
          display: flex;
          .img{
            width: 80px;
            height: 110px;
            margin-right: 10px;
            border-radius: 5px;
          }
          .right-info{
            width: calc(100% - 90px);
            .name{
              font-family: 冷酷体;
              font-size: 16px;
              margin-top: 6px;
              display: inline;
              margin-right: 20px;
            }
            .unit{
              font-size: 13px;
              //margin-top: 5px;
              display: inline;
              vertical-align: middle; // 垂直居中对齐
            }
            .text{
              font-size: 13px;
              margin-top: 10px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              /* 超出几行省略 */
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>
